<template>
  <div style="width: 100%;height: 100%;background-color: white;">
    <div class="list">
      <div style="padding-left: 20px">
        <div v-for="(item,i) in itemTitle"
             :key="i"
             @click="toItem(i+1)"
             :class="activeKey==(i+1)?'focus':''">{{ item }}</div>
      </div>
    </div>

    <building-project ref="buildingProject" v-if="activeKey == 1"></building-project>
    <project-count-report ref="projectCountReport" v-if="activeKey == 2"></project-count-report>
  </div>

  <!--<a-layout id="components-layout-demo-top" class="layout">
    <a-layout-header style="height: 50px">
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['1']"
        :style="{ lineHeight: '50px' }">
        <a-menu-item key="1" @click="showTab(1)">在建工程表</a-menu-item>
        <a-menu-item key="2" @click="showTab(2)">工程统计报表</a-menu-item>
      </a-menu>
    </a-layout-header>

    <a-layout-content style="margin-top: 10px">
      <div :style="{ background: '#fff', padding: '10px' }" v-show="currentKey == 1">
        <building-project ref="buildingProject"></building-project>
      </div>

      <div :style="{ background: '#fff', padding: '10px' }" v-show="currentKey == 2">
        <project-count-report ref="projectCountReport"></project-count-report>
      </div>
    </a-layout-content>
  </a-layout>-->

</template>

<script>
  import buildingProject from "./tabs/buildingProject";
  import projectCountReport from "./tabs/projectCountReport";

  export default {
    name: "projectReportFormsMain",
    components: {
      buildingProject,projectCountReport,
    },
    data() {
      return {
        currentKey: 1,
        activeKey: "1",
        itemTitle: [
          "在建工程表",
          "工程统计报表",
        ],
      }
    },
    methods: {
      showTab(key) {
        this.currentKey = key;
      },
      toItem(i){
        this.activeKey = i
      }
    }
  }
</script>

<style scoped scoped lang="less">
  ::-webkit-scrollbar {
    display: none;
  }
  .list{
    width: 100%;
    height: 50px;
    overflow: hidden;
    overflow-x: scroll;
    border-bottom: 1px solid #f6f6f6;
    &>div{
      display: flex;
      width: max-content;
      div{
        padding-right: 20px;
        line-height: 50px;
        text-align: center;
      }
      div::after{
        display: block;
        margin: -3px auto 0;
        width: 0px;
        height: 2px;
        content: '';
        background-color: #40a9ff;
      }
      .focus{
        color: #40a9ff;
      }
      .focus::after{
        width: 4em;
        transition: 0.5s;
      }
    }
  }
</style>